<template>
  <div>
    <h2>自定义带Hover提示的按钮</h2>
    <!-- 属性:不是动态的,父组件给子组件传递数据--props -->
    <HintButton
      type="info"
      size="mini"
      icon="el-icon-plus"
      title="删除"
      @click="handler"
    />
    <!-- 栅格系统 -->
    <el-row :gutter="50">
      <el-col :xl="24" :xs="12">
        <p>曹操</p>
      </el-col>
      <el-col :span="8">
        <p>曹操1</p>
      </el-col>
      <el-col :span="8">
        <p>曹操2</p>
      </el-col>
    </el-row>
    <hr />
    <!-- element-UI提供表格组件 -->
    <el-table style="width: 100%" :data="list" border>
      <el-table-column prop="id" label="id" width="80"></el-table-column>
      <el-table-column prop="name" label="名字" width="180"></el-table-column>
      <el-table-column prop="age" label="美羊羊" width="width">
             <template slot-scope="{row,index}">
                   <el-button type="danger">{{row.age}}---{{index}}</el-button>
             </template>
      </el-table-column>
      <el-table-column prop="sex" label="灰太狼" width="width"></el-table-column>
    </el-table>
  </div>
</template>

<script type="text/ecmascript-6">
import HintButton from "./HintButton";
export default {
  name: "AttrsListenersTest",
  components: {
    HintButton,
  },
  methods: {
    handler() {
      alert("我是祖国的花骨朵");
    },
  },
  data() {
    return {
      list: [
        { id: 1, name: "小明", age: 18, sex: "男" },
        { id: 2, name: "小网", age: 28, sex: "女" },
        { id: 3, name: "小粒", age: 38, sex: "男" },
        { id: 4, name: "小洪", age: 48, sex: "女" },
        { id: 5, name: "小非", age: 58, sex: "男" },
        { id: 6, name: "小栏", age: 68, sex: "女" },
        { id: 7, name: "小贾", age: 8, sex: "女" },
      ],
    };
  },
};
</script>
<style>
p {
  background: red;
}
</style>
